<!DOCTYPE html>
<html>
	<head>
		<title>孙煜琳-Jquery登录</title>

		<meta name="keywords" content="孙煜琳-17周作业" />
		<meta name="description" content="孙煜琳-17周作业:(1)将登录居中 (2)输入用户名和密码跳转到指定网址" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<link rel="icon" href="./images/web.png" type="image/x-icon" />
		<!-- Custom Theme files -->
		<link href="css/Week17_style.css" rel="stylesheet" type="text/css" media="all" />
		<!-- //Custom Theme files -->

		<script type="application/x-javascript">
			addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
		</script>
		<!-- js外部文件 -->
		<script src="https://code.jquery.com/jquery-3.6.0.js" type="text/javascript"></script>
		
	</head>
	<body>
		<!-- main -->
		<div class="main">
			<h1>疫情统计系统登录界面</h1>
			<div class="main-w3lsrow">
				<!-- login form -->
				<div class="login-form login-form-left">
					<div class="agile-row">
						<h2>Sign    in！</h2>
						<div class="login-agileits-top">
							<form id="myForm" action="javascript:void(0);" method="post">
								<p>用户名</p>
								<input type="text" class="name" 
								id="userName"
								name="userName" required=""
								placeholder="请输入用户名" />
								<p>密码</p>
								<input type="password" class="password"
								id="password"
								name="password" required="" 
								placeholder="请输入用户密码"/>
								<label class="anim">
									<input type="checkbox" class="checkbox" />
									<span> 记住密码 ?</span>
								</label>
								<input type="submit" id="btn01" value="登录" />
							</form>
						</div>
						<div class="login-agileits-bottom">
							<h6><a href="http://www.sfac.xyz/api/login">忘记密码 ?</a></h6>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<!-- //main -->
		<!-- copyright -->
		<div class="copyright">
			<p>
				<p>&copy;2022 17周大作业 · Jquery登录 | Design by &hearts;11923040212-孙煜琳</p>
				<a href="http://www.sfac.xyz/api/login " target="_blank">
				<span style="color: rgb(220, 247, 254);
				font-size: 50px;font-weight: bolder;">
				&lt;点击跳转网址&gt;</span>
				</a>
			</p>
		</div>

		<!-- sign in -->
		<script> 
		//From表单提交
		//绑定按钮 
		$(function(){

			$("#btn01").click(function(){
				signIn();
			});
		});

		function func_web(){
			location.href = "./疫情大数据/Epidemic_Data.html";
		}

		function signIn(){
			var user = {};
			user.userName = $("#userName").val();
			user.password = $("#password").val();

			/* 调用ajax函数，参数为ajax的配置属性对象 */
			$.ajax({
				url: "http://www.sfac.xyz/api/login",
				type:"post",
				contentType:"application/json",
				data: JSON.stringify(user),
				success: function(result) {
					//TODO
					if (result.status == 200){
						alert(result.message);
						console.log(result.data);
						func_web();
					} else{
						alert(result.message);
					}
				},
				error: function(erro){
					console.log(erro);
				}
			});
		}
	</script>
	</body>
</html>


<!-- <span style="color: #ff99cc"> 请</span>
<span style="color: #ff66cc"> 点</span>
<span style="color: #ff33cc"> 击</span>
<span style="color: #ff00cc"> 跳</span>
<span style="color: #ff6699"> 转</span>
<span style="color: #ff3399"> 网</span>
<span style="color: #ff0099"> 址</span>
<span style="color: #cc3399"> ！！！！</span> -->